<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>黏土教程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        [v-cloak]{
            display: none !important;
        }
        .mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear, .mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech {
            top: 13px;
            right: 0;
        }


    </style>
</head>
<body>
<div id="vue">

    <header class="mui-bar mui-bar-nav top-color">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <div class="mui-title mui-input-row "style="width: 50%" >
            <input type="search" id="searchKey" class="mui-input-clear" style="background: white;" placeholder="请输入关键字">
        </div>
        <a id="search" v-on:click="getCmsList()" style="color: white ;float: right; margin-right: 45px;margin-top: 12px;" > 搜索</a>
    </header>

    <!--底部导航栏-->
    <footer class="mui-bar-new mui-bar-tab-new" >
        <ul class="ful">
            <li>
                <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
                    <img src="${base!}/assets/front/newH5/images/icon1.png" alt="" />
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon2.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
                    <span>领券中心</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon4.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </footer>
    <div class="mui-content" style="background: white;margin-bottom: 30%"  v-cloak>
        <ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-3" style="width: 50%"  v-for="item in cmsList" :key="item.id">
                <a v-bind:href="'${base!}/open/h5/niantu/tutorialDetails.html?id='+item.id">
                    <img :src="item.picurl" width="150px;" height="150px;"/>
                    <div class="mui-media-body">{{item.title}}</div>
                    <div class="mui-media-body" style="height: 19px;">
                        <span class="tutorial">{{item.opAt}}</span>
                        <span style="float: right;font-size: 0.88em;color: #919191;">{{item.pageViews==null?0:item.pageViews}}</span>
                        <span class="right1">
                        <img class="pon" src="${base!}/assets/front/h5/img/yan.png" width="20px"/>
                    </span>

                    </div>
                </a>
            </li>

        </ul>
    </div>
</div>

<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var vue = new Vue({
        el: '#vue',
        data: {
            cmsList: [],
        },
        created:function () {   //实例初始化创建完成执行

            this.getCmsList()     //调用自身方法

        },
        methods:{              //定义封装方法
            //获取列表
            getCmsList:function () {
                var self = this;
                var key = $("#searchKey").val();
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/cmsListByType.html",
                    dataType:"JSON",
                    data:{
                        typeName:'ntjc',
                        key:key
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            $.each(d, function (index, obj) {
                                obj.opAt=timestamp(obj.opAt)
                                d[index] = obj;
                            })
                            self.cmsList = d;
                        } else {

                        }
                    }
                });

            }
        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    })

    //处理时间戳
    function timestamp(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes();
        s = date.getSeconds();
        return Y+M+D+h+m;
    }
</script>
</body>
</html>
